<template>
  <FormItemWrapper :component="component">
    <Upload :action="component.compConfigData.widgetConfig.action"
            :headers="headers"
            :multiple="component.compConfigData.widgetConfig.multiple"
            :paste="component.compConfigData.widgetConfig.paste"
            :disabled="component.compConfigData.widgetConfig.disabled"
            :data="data"
            :name="component.compConfigData.widgetConfig.name"
            :with-credentials="component.compConfigData.widgetConfig.withCredentials"
            :show-upload-list="component.compConfigData.widgetConfig.showUploadList"
            :type="component.compConfigData.widgetConfig.type"
            :accept="component.compConfigData.widgetConfig.accept"
            :format="uploadFormat"
            :max-size="component.compConfigData.widgetConfig.maxSize"
            :before-upload="onBeforeUpload"
            :on-progress="onProgress"
            :on-success="onSuccess"
            :on-error="onError"
            :on-preview="onPreview"
            :on-remove="onRemove"
            :on-format-error="onFormatError"
            :on-exceeded-size="onExceededSize"
    >
      <Button icon="ios-cloud-upload-outline">文件上传</Button>
    </Upload>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemFileUploadWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, ''),
      widgetConfig: {
        action: 'http://localhost:8090/file/upload',
        headers: '{"Authorization": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMSIsImN1cnJlbnRUaW1lTWlsbGlzIjoiMTY2Mjk1NzYyNDQ3NiIsImV4cCI6MTY2MzEzMDQyNCwidXNlcm5hbWUiOiJhZG1pbiJ9.MxIv5btIAe50fCQ54Yk6FA4GM6r7BRikbU9izZvK_ms"}',
        multiple: false,
        paste: false,
        disabled: false,
        data: '{}',
        name: 'file',
        withCredentials: false,
        showUploadList: true,
        type: 'select',
        accept: '.png,.jpeg,.jpg',
        format: [],
        maxSize: 1024,

        defaultFileList: '[]'
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onBeforeUpload: {remark: '上传文件之前触发', resultValues: [], code: ''},
        onProgress: {remark: '文件上传时触发', resultValues: ['event', 'file', 'fileList'], code: ''},
        onSuccess: {remark: '文件上传成功时触发', resultValues: ['response', 'file', 'fileList'], code: ''},
        onError: {remark: '文件上传失败时触发', resultValues: ['error', 'file', 'fileList'], code: ''},
        onPreview: {remark: '点击已上传的文件链接时触发，可以通过 file.response 拿到服务端返回数据', resultValues: ['file'], code: ''},
        onRemove: {remark: '文件列表移除文件时触发', resultValues: ['file', 'fileList'], code: ''},
        onFormatError: {remark: '文件格式验证失败时触发', resultValues: ['file', 'fileList'], code: ''},
        onExceededSize: {remark: '文文件超出指定大小限制时触发', resultValues: ['file', 'fileList'], code: ''},
      })

    })
  },
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    onBeforeUpload() {
      this.runWidgetEventCode('onBeforeUpload')
    },

    onProgress(event, file, fileList) {
      this.runWidgetEventCode('onProgress', (fn)=>{
        fn.call(this, event, file, fileList)
      })
    },

    onSuccess(response, file, fileList) {
      this.runWidgetEventCode('onSuccess', (fn)=>{
        fn.call(this, response, file, fileList)
      })
    },

    onError(error, file, fileList) {
      this.runWidgetEventCode('onError', (fn)=>{
        fn.call(this, error, file, fileList)
      })
    },

    onPreview(file) {
      this.runWidgetEventCode('onPreview', (fn)=>{
        fn.call(this, file)
      })
    },

    onRemove(file, fileList) {
      this.runWidgetEventCode('onRemove', (fn)=>{
        fn.call(this, file, fileList)
      })
    },

    onFormatError(file, fileList) {
      this.runWidgetEventCode('onFormatError', (fn)=>{
        fn.call(this, file, fileList)
      })
    },

    onExceededSize(file, fileList) {
      this.runWidgetEventCode('onExceededSize', (fn)=>{
        fn.call(this, file, fileList)
      })
    },

  },
  computed: {
    headers() {
      return JSON.parse(this.component.compConfigData.widgetConfig.headers)
    },
    data() {
      return JSON.parse(this.component.compConfigData.widgetConfig.data)
    },
    uploadFormat() {
      let arr = this.component.compConfigData.widgetConfig.accept.split(',')
      return arr.map((o)=>{return o.replace('.','')})
    }
  },
  watch: {}
}
</script>

<style scoped>

</style>
